import React from 'react'
import ReactDOM from 'react-dom'



// 普通组件
class App extends React.Component {
    render() {
        return (
            <>
                <div>my seniorComponent</div>
            </>
        )
    }
}


// 组件处理函数，返回处理后（eg：预置参数）的组件（类似柯里化函数）
function hocFunc(Com) {
    return (params) => {
        return class Temp extends React.PureComponent{
            state = {
                name : 'jam'
            }
            render() {
                return (
                    <>
                        <Com 
                        className="box" name={this.state.name} 
                        {...params}
                        {...this.props}
                        />
                    </>
                )
            }
        }
    }
}

// 原App组件经过hoc管道函数处理，返回Temp高阶组件来管理App组件
// 通过行内属性或插槽向App传值时，都会先被传到Temp组件上
App = hocFunc(App)({time: '2020', ddd: 123})
ReactDOM.render(<App tempAttr='temp'/>, document.getElementById('root'))